<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://mybatis.org/schema/mybatis-mapper"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-id="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>商品管理</title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/jquery-steps/css/jquery.steps.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

</head>

<body class="sticky-header">
<div>
    <div>
        <!--Start left side Menu-->
        <div id="nav-left" class="left-side sticky-left-side">
        </div>
        <!--<script src="assets/js/commonPage/nav-left.js"></script>-->
        <!--End left side menu-->


        <!-- main content start-->
        <div class="main-content">

            <!-- header section start-->
            <!--        <script src="assets/js/commonPage/header.js"></script>-->
            <div class="header-section">

                <a class="toggle-btn"><i class="fa fa-bars"></i></a>

                <form class="searchform">
                    <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
                </form>

                <!--notification menu start -->
                <div class="menu-right">
                    <ul class="notification-menu">
                        <li>
                            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <img :src="avatar" alt=""/>
                                头像
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                                <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                                <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                                <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                                <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
                <!--notification menu end -->

            </div>
            <!-- header section end-->


            <!--body wrapper start-->
            <div class="wrapper">

                <!--Start Page Title-->
                <div class="page-title-box">
                    <h4 class="page-title">新增商品</h4>
                    <ol class="breadcrumb">
                        <li>
                            <a href="#">卖家端</a>
                        </li>
                        <li>
                            <a href="#">商品管理</a>
                        </li>
                        <li class="active">
                            新增商品
                        </li>
                    </ol>
                    <div class="clearfix"></div>
                </div>
                <!--End Page Title-->


                <!-- Start row-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="white-box">
                            <h2 class="header-title">新增流程 </h2>
                            <form id="example-form" action="#">
                                <div>
                                    <h3>阅读商品守则</h3>
                                    <section>
                                        上传备案证件材料时，请提供与备案信息相符的证件材料。具体上传规范如下：

                                        确保您提供的证件在有效期内。

                                        请提供原证件的正反面彩色扫描件或拍照件。

                                        为保证您的信息能正常通过审核，请上传清晰、完整的图片材料。
                                        <p>•&nbsp;制止未经允许运用第三方插件；</p>
                                        <p>•&nbsp;制止传播其他平台辨认码、口令类信息；</p>
                                        <p>•&nbsp;制止威逼用户停止分享、关注、点赞和评论；</p>
                                        <p>比方以某种奖励停止诱导，包括但不限于：约请好友拆礼盒，集赞，分享可增加一次抽奖时机等。</p>
                                        <p>•&nbsp;刷粉刷量；</p>
                                        <p>•&nbsp;泄露别人隐私（如联络方式、住址、照片等）；</p>
                                        <p>•&nbsp;发布不实信息：包括触及政治、具有怂恿性、扰乱社会次序、宣传邪教、与公众相关的不实内容等</p>
                                    </section>
                                    <h3>商品信息</h3>
                                    <section class="col-lg-12">
                                        <h4>商品信息：</h4>
                                        <div class="row" id="in_vue">
                                            <div class="form-group clearfix">
                                                <label for="goodsName" class="col-md-2">商品名 *</label>
                                                <div class="col-md-10">
                                                    <input id="goodsName" type="text" class="required form-control">
                                                </div>
                                            </div>

                                            <div class="form-group clearfix">
                                                <label for="summary" class="col-md-2">描述 *</label>
                                                <div class="col-md-10">
                                                    <input id="summary" type="text" class="required form-control">
                                                </div>
                                            </div>

                                            <div class="form-group clearfix">
                                                <label for="content" class="col-md-2">内容 *</label>
                                                <div class="col-md-10">
                                                    <input id="content" type="text" class="required form-control">
                                                </div>
                                            </div>

                                            <div class="form-group clearfix">
                                                <label for="barCode" class="col-md-2">商品码 *</label>
                                                <div class="col-md-10">
                                                    <input id="barCode" type="text" class="required form-control">
                                                </div>
                                            </div>

                                            <div class="form-group clearfix">
                                                <label for="afterSale" class="col-md-2">售后服务 *</label>
                                                <div class="col-md-10">
                                                    <input id="afterSale" type="text" class="required form-control">
                                                </div>
                                            </div>

                                            <div class="col-lg-12" style="margin-bottom: 2%">
                                                <h4>商品分类：</h4>
                                                <select class="form-control input-lg" v-on:change="categorySelect"
                                                        v-model="categoryType">
                                                    <option style='display: none'></option>
                                                    <option v-for="category in category" :value="category.name">
                                                        {{category.name}}
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-lg-12" v-if="categoryType==='拦精灵'">
                                                <h4>功能</h4>
                                                <div class="radio radio-inline purple" v-for="functions in functions">
                                                    <input type="radio" name="radio-1" :value="functions.name"
                                                           v-bind:id="functions.fuId"
                                                           v-model="functionsType">
                                                    <label v-bind:for="functions.fuId">{{functions.name}}</label>
                                                </div>
                                                <!--                                            <div class="checkbox checkbox-inline purple"  v-for="functions in functions">-->
                                                <!--                                                <input type="checkbox" v-bind:id="functions.fuId">-->
                                                <!--                                                <label v-bind:for="functions.fuId">{{functions.name}}</label>-->
                                                <!--                                            </div>-->
                                            </div>
                                            <div class="col-lg-12" v-if="categoryType==='拦精灵'">
                                                <h4>外观</h4>
                                                <div class="radio radio-inline purple" v-for="appearance in appearance">
                                                    <input type="radio" name="radio-2" :value="appearance.name"
                                                           v-bind:id="appearance.apId"
                                                           v-model="appearanceType">
                                                    <label v-bind:for="appearance.apId">{{appearance.name}}</label>
                                                </div>
                                            </div>
                                            <div class="col-lg-12" v-if="categoryType!=='拦精灵'&&categoryType!=''">
                                                <h4>材质</h4>
                                                <div class="radio radio-inline purple" v-for="material in material">
                                                    <input type="radio" name="radio-3" :value="material.name"
                                                           v-bind:id="material.maId"
                                                           v-model="materialType">
                                                    <label v-bind:for="material.maId">{{material.name}}</label>
                                                </div>
                                            </div>
                                            <div class="col-lg-12" v-if="categoryType!=='拦精灵'&&categoryType!=''">
                                                <h4>类别</h4>
                                                <div class="radio radio-inline purple"
                                                     v-for="controlType in controlType">
                                                    <input type="radio" name="radio-4" :value="controlType.name"
                                                           v-bind:id="controlType.ctId"
                                                           v-model="controlTypeType">
                                                    <label v-bind:for="controlType.ctId">{{controlType.name}}</label>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-lg-3">
                                                    <div class="form-group clearfix">
                                                        <label for="goodsSize" class="col-md-3">尺寸 *</label>
                                                        <div class="col-md-9">
                                                            <input id="goodsSize" type="text" class="form-control required">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="form-group clearfix">
                                                        <label for="price" class="col-md-3">价格</label>
                                                        <div class="input-group"><span class="input-group-addon">$</span>
                                                            <input id="price" class="form-control" type="text" value="0">
                                                            <span class="input-group-addon">.00</span></div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-3">
                                                    <div class="form-group clearfix">
                                                        <label for="totalNum" class="col-md-3">库存 *</label>
                                                        <div class="col-md-9">
                                                            <input id="totalNum" type="text" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2">
                                                    <button class="btn btn-info" @click="addInfo"><i
                                                            class="fa fa fa-plus"></i> <span>新增商品</span></button>
                                                </div>
                                            </div>
                                        </div>
                                    </section>


                                    <h3>上传图片</h3>
                                    <section class="col-lg-12">

                                    </section>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- End row-->
            </div>
            <!-- End Wrapper-->


            <!--Start  Footer -->
            <footer id="footer" class="footer-main"></footer>
            <!--<script src="assets/js/commonPage/footer.js"></script>-->
            <!--End footer -->

        </div>
        <!--End main content -->

    </div>
    <!--Begin core plugin -->
    <script src="assets/js/jquery.min.js"></script>
    <!--======vue js ======-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/moment/moment.js"></script>
    <script src="assets/js/jquery.slimscroll.js "></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="assets/pages/jquery.validate.min.js"></script>
    <script src="assets/plugins/jquery-steps/js/jquery.steps.min.js" type="text/javascript"></script>
    <!--====== http util js ======-->
    <script src="assets/js/util/http-util.js"></script>
</div>
</body>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    })
</script>
</html>
<script>
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        autoFocus: true
    });
    //steps with form
    var form = $("#example-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) {
            element.before(error);
        },
        rules: {
            confirm: {
                equalTo: "#password"
            }
        }
    });
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {
            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },
        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex) {
            alert("Submitted!");
        }
    });

    let in_vue = new Vue({
        el: '#in_vue',
        data: {
            functions: [],
            category: [],
            controlType: [],
            material: [],
            appearance: [],
            categoryType: [],
            functionsType: [],
            appearanceType: [],
            controlTypeType: [],
            materialType: [],
            counter: [],
            avatar:"",
        },
        methods: {
            getClassfication: function () {
                let url = "/shop_admin/goodsManage/insert";
                let Obj = this;
                doGet(url, function (resp) {
                    Obj.category = resp.categoryList;
                    Obj.functions = resp.functionList;
                    Obj.appearance = resp.appearanceList;
                    Obj.controlType = resp.controlTypeList;
                    Obj.material = resp.materialList;
                })
            },
            categorySelect: function () {
                this.functionsType = null;
                this.appearanceType = null;
                this.controlTypeType = null;
                this.materialType = null;
            },
            addInfo: function () {
                let goodsName = $("#goodsName").val();
                let summary = $("#summary").val();
                let content = $("#content").val();
                let barCode = $("#barCode").val();
                let afterSale = $("#afterSale").val();
                let goodsSize = $("#goodsSize").val();
                let price = $("#price").val();
                let totalNum = $("#totalNum").val();
                let url = "/shop_admin/goodsManage/insertGoodsInfo";
                let params = {name: goodsName, summary: summary, content: content, barCode: barCode, afterSale: afterSale, size: goodsSize, originalPrice: price,
                    totalNum: totalNum, category: this.categoryType, function: this.functionsType, appearance: this.appearanceType
                    , controlType: this.controlTypeType, material: this.materialType};
                console.log(params);
                doPost(url,params,function () {
                    alert("success");
                })
            },
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/"+resp;
                    console.log(thisObj.avatar);
                })
            }
        },
        mounted: function () {
            this.getClassfication();
            this.getAvatar();
        }
        ,
    })
</script>
